<template>
  <div class="basicdisplay-data">
    <el-card :body-style="{ padding: '0px' }" class="btn">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <el-row :gutter="20" style="padding:10px 20px;">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>餐饮企业数量</span>
            </div>
            <div>
              {{restaurant}}
            </div>
            <el-progress :percentage="restaurant" :color="our" :show-text="false"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>清洗企业数量</span>
            </div>
            <div>
              {{clean}}
            </div>
            <el-progress :percentage="clean" :color="bull" :show-text="false"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>在线设备数量</span>
            </div>
            <div>
              {{online}}
            </div>
            <el-progress :percentage="online" :show-text="false"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>待处理问题数</span>
            </div>
            <div>
              {{disposal}}
            </div>
            <el-progress :percentage="disposal" :color="yellow" :show-text="false"></el-progress>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
export default {
  name: "BasicDisplay",
  components: {
    ToolsBtn
  },
  data () {
    return {
      toolsData: {
        title: "基本数据展示",
        identifier: false,
        oBtnShow: [
          {btn0: false}, //新增按钮
          {btn1: false}, //刷新按钮
          {btn2: false}, //搜索按钮
          {btn3: false}, //设置按钮
          {btn4: false}  //导出Excel按钮
        ]
      },
      restaurant: '',
      clean: '',
      online: '',
      disposal: '',
      percentage: 0,
      yellow: "#67C23A",
      bull: "#F56C6C",
      our: "#E6A23C"
    }
  },
  created () {
    this.getList();
  },
  methods: {
    // 数据列表
    getList(){
      this.$api.BASICDISPLAY.basicData()
      .then(res => {
        console.log(res)
        this.restaurant = res.data.repastCount
        this.clean = res.data.cleanerCount
        this.online = res.data.onlineCount
        this.disposal = res.data.pendingCount
      })
      .catch(() => {
        this.$message({
          message:"暂无数据",
          type: 'error'
        }); 
      })
    },
    // 编辑
    handleEdit(){

    },
    // 删除
    handleDel(){

    },
    //新增数据
    addData(){

    },
    //列表刷新数据
    refresh(){

    },
    // 搜索
    search(){

    },
    // 字段设置
    fieldSet(){

    },
    // 隐藏表格操作列
    hasOperation(){
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style lang="scss" scoped>
.btn{
  display: block;
  height: 700px;
}
</style>